<template>
	<view :data-theme="theme">
		<u-scroll-list :indicator="isScroll" :indicatorActiveColor="bgColor" style="padding: 0;">
			<view class="scroll-list" :style="{width:!isScroll && '100%'}">
	            <view
	                    class="scroll-list__goods-item"
						:style="{width:!isScroll && '50%'}"
	                    v-for="(item, index) in tabList"
	                    :key="index"
						@click="ontabtap(index,item)">
	                <text class="scroll-list__goods-item__text"  
					:class="[(index === tabIndex) && 'uni-tab-item-title-active']">
						{{ item.name }}
					</text>
				</view>
				
	        </view>
			
	<!-- 		<view class="scroll-view-indicator">
				<view  class="scroll-view-underline" :class="isTap ? 'scroll-view-animation':''"
						:style="{left: indicatorLineLeft + 'px', width:indicatorLineWidth + 'px'}"></view>
			</view> -->
		</u-scroll-list>
		
	</view>
</template>

<script>
	import {setThemeColor} from '@/utils/setTheme.js'
	let app = getApp();
	export default {
		data() {
			return {
				bgColor:"#ffffff",
				theme: app.globalData.theme,
				indicatorLineLeft: 0,
				indicatorLineWidth: 30,
				isTap: false,
			};
		},
		props: {
			isScroll:{
				type:Boolean,
				default:true
			},
			tabList:{
				type:Array,
				default:[]
			},
			tabIndex:{
				type:Number,
				default:0
			},
		},
		created() {
			this.bgColor = setThemeColor();
			this._lastTabIndex = 0;
			this.swiperWidth = 0;
			this.tabbarWidth = 0;
			this.tabListSize = {};
			this._touchTabIndex = 0;
			this.selectorQuery();
		},
		methods:{
			selectorQuery() {
				// #ifdef MP-WEIXIN || H5 || MP-QQ
				// uni.createSelectorQuery().in(this).select('.tab-view').fields({
				// 	dataset: true,
				// 	size: true,
				// }, (res) => {
				// 	this.swiperWidth = res.width;
				// }).exec();
				// uni.createSelectorQuery().in(this).selectAll('.scroll-list__goods-item')
				// .boundingClientRect((rects) => {
				// 	rects.forEach((rect) => {
				// 		this.tabListSize[rect.dataset.id] = rect;
				// 	})
				// 	this.updateIndicator(this.tabListSize[this.tabIndex].left, this.tabListSize[this.tabIndex]
				// 		.width);
				// }).exec();
				// #endif
			},
			updateIndicator(left, width) {
				this.indicatorLineLeft = left;
				this.indicatorLineWidth = width;
			},
			ontabtap(index,item) {
				
				// #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
				this.isTap = true;
				// var currentSize = this.tabListSize[index];
				this.updateIndicator(index*90, 40);
				
				// #endif
				// this.switchTab(index);
				
				
				//更新父组件值
				this.$emit('update:tabIndex',index);
				//值改变事件
				this.$emit('change',index);
				//值改变事件
				this.$emit('tabClick',item);
			},
		}
	}
</script>

<style scoped>
	::v-deep .u-scroll-list__indicator{
		margin: 0px !important;
	}
</style>
<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}
	
	.uni-tab-item-title-active {
		font-weight: bold;
		@include main_color(theme);
	}
	
	.scroll-view-underline {
		@include main_bg_color(theme);
	}
	.scroll-list {
		@include flex(column);
		background-color: #FFF;
		flex-direction: row;
		&__goods-item {
			width: 33vw; //每个所占视图宽度
			height: 90rpx;
			text-align: center;
			line-height: 90rpx;
			&__text {
				font-size: 15px;
				
				color: #999;
			}
		}
	}

	.scroll-view-indicator {
		position: relative;
		height: 2px;
		background-color: transparent;
	}
	.scroll-view-underline {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 0;
	}
	.scroll-view-animation {
		transition-duration: 0.2s;
		transition-property: left;
	}
</style>
